<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
	*{margin:0 auto; padding: 0;}
	html,body{
		width: 100%; height: 100%;
		position: relative;
	}
	#box{
		width: 100%; height: 100%;
		overflow:hidden;
	}
    canvas { width: 100%; height: 100% }</style>
    <script src="three.js"></script>
</head>
<body>
	<div id='box'></div>

<script>
    var scene = new THREE.Scene();
	
	/**
	 * PerspectiveCamera( fov, aspect, near, far )
        fov — 相机视锥体垂直视角
		aspect — 相机视锥体宽高比
		near — 相机视锥体近裁剪面  
		far — 相机视锥体远裁剪面。
		注： near和far单位是一致的，都为厘米、米等单位
	 */	
	
	var Width = document.documentElement.clientWidth;  //除去滚动条宽度的浏览器宽度
	var Height = document.documentElement.clientHeight;  //除去滚动条宽度的浏览器高度
    var camera = new THREE.PerspectiveCamera(75, Width/Height, 0.1, 1000);
	
    var renderer = new THREE.WebGLRenderer();

    console.log(Width, Height)
    renderer.setSize(Width, Height);
	
	var box = document.getElementById('box');
    box.appendChild(renderer.domElement);
    var geometry = new THREE.CubeGeometry(1,1,1);  //定义一个正方体
    var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); //材质
    var cube = new THREE.Mesh(geometry, material);  //网格
    scene.add(cube);
    camera.position.z = 5;  //相机z轴距离
    function render() {
        requestAnimationFrame(render); //调用一次render函数，相当于setTimeout
        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
        renderer.render(scene, camera);
    }
    render();
</script>
</body>
</html>